<template>
  <div>
    <el-upload
        :action="dataObj.host"
        :data="dataObj"
        list-type="picture-card"
        :multiple="false"
        name="file"
        :auto-upload="true"
        :before-upload="beforeUpload"
        :on-remove="handleRemove"
        :on-success="handleUploadSuccess"
        :on-preview="handlePictureCardPreview"
        :limit="1"
        :on-exceed="onExceed"
    >
      <i class="el-icon-plus"></i>
    </el-upload>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="fileList[0].url" alt />
    </el-dialog>
  </div>
</template>
<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "singleUpload",
  props: {
    value: String
  },
  computed: {
    imageUrl() {
      return this.value;
    },
    imageName() {
      if (this.value != null && this.value !== "") {
        return this.value.substr(this.value.lastIndexOf("/") + 1);
      } else {
        return null;
      }
    },
    fileList() {
      return [
        {
          name: this.imageName,
          url: this.imageUrl
        }
      ];
    }
  },
  data() {
    return {
      dataObj: {
        /*policy: "",
        signature: "",
        key: "",
        accessKeyId: "",
        dir: "",
        host: ""*/
        // callback:'',
      },
      dialogVisible: false
    };
  },
  methods: {
    onExceed() {
      this.$message({
        type: 'error',
        message: '最多上传一张图片'
      });
    },
    emitInput(val) {
      this.$emit("input", val);
    },
    handleRemove(file, fileList) {
      console.log("handleRemove...");
      this.emitInput("");
    },
    handlePictureCardPreview(file) {
      console.log("show image...");
      this.dialogVisible = true;
    },
    beforeUpload(file) {
      console.log("start beforeUpload...");
      console.log("uuid", uuidv4());
      // let _self = this;
      return new Promise((resolve, reject) => {
        this.$http
            .post("/admin/common/upload")
            /*.then(result => {
              /!*let response = result.data;
              console.log("响应的数据：", response);
              _self.dataObj.policy = response.data.policy;
              _self.dataObj.signature = response.data.signature;
              _self.dataObj.accessKeyId = response.data.accessKeyId;
              _self.dataObj.key = response.data.dir + uuidv4() + "_${filename}";
              _self.dataObj.dir = response.data.dir;
              _self.dataObj.host = response.data.host;*!/
              resolve(true);
            })
            .catch(err => {
              reject(false);
            });*/
      });
    },
    handleUploadSuccess(res, file) {
      console.log("上传成功...");
      this.showFileList = true;
      this.fileList.pop();
      this.fileList.push({
        name: file.name,
        url:
            this.dataObj.host +
            "/" +
            this.dataObj.key.replace("${filename}", file.name)
      });
      console.log("image url:", this.fileList[0].url);
      this.emitInput(this.fileList[0].url);
    }
  }
};
</script>

<style>
</style>